<template>
  <!-- 产品池管理 -->
  <div class="pro_pool_response.data.records">
    <div style="padding:10px;margin-bottom:10px;background:#fff">
      <el-button style="margin-right: 6px" type="primary" icon="el-icon-plus" size="small" @click="add">新增</el-button>
      <el-input v-model="form.proName" placeholder="请输入项目名" style="width: 150px; margin-left: 8px" clearable></el-input>
      <el-input v-model="form.name" placeholder="请输入设备名" style="width: 150px; margin-left: 8px" clearable></el-input>
      <el-input v-model="form.supplier" placeholder="供应商" style="width: 150px; margin-left: 8px" clearable></el-input>
      <el-input v-model="form.brand" placeholder="请输入品牌" style="width: 150px; margin-left: 8px" clearable></el-input>
      <el-input v-model="form.model" placeholder="请输入型号" style="width: 150px; margin-left: 8px" clearable></el-input>
      <el-date-picker
        style="margin: 8px"
        v-model="form.time"
        unlink-panels
        value-format="timestamp"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button style="margin-right: 6px" type="primary" icon="el-icon-search" size="small" @click="buttonToSearch">查询</el-button>
    </div>
    <div style="padding:10px;margin:10px;background:#fff">
      <el-button style="margin: 6px" type="primary" size="small" :loading="downloadLoading" @click="handleDownload">导出</el-button>
      <a-table
        :loading="loading"
        :data-source="pools"
        size="small"
        :pagination="pagination"
        :rowKey="record => record.id"
        :scroll="pools.length>0?{x:1300}:{}"
        >
        <a-table-column :width="60" title="序号" align="center">
          <template slot-scope="text, record, index">
            {{index+1}}
          </template>
        </a-table-column>
        <a-table-column key="proName" title="项目名" data-index="proName" align="center">
          <template slot-scope="t, r">
            <a @click="jumpQuote(r.proDetailId)">{{ t }}</a>
          </template>
        </a-table-column>
        <a-table-column key="name" title="设备名" data-index="name" ellipsis="true" align="center">
          <template slot-scope="text">
            <span :title="text" @click="handleCopy(text, $event)">{{ text }}</span>
          </template>
        </a-table-column>
        <a-table-column key="supplier" title="供应商" data-index="supplier" ellipsis="true" align="center">
          <template slot-scope="text">
            <span :title="text" @click="handleCopy(text, $event)">{{ text }}</span>
          </template>
        </a-table-column>
        <a-table-column :width="100" key="brand" title="品牌" data-index="brand" ellipsis="true" align="center">
          <template slot-scope="text">
            <span :title="text" @click="handleCopy(text, $event)">{{ text }}</span>
          </template>
        </a-table-column>
        <a-table-column :width="100" key="params" title="技术参数" data-index="params" ellipsis="true" align="center">
          <template slot-scope="text">
            <span :title="text" @click="handleCopy(text, $event)">{{ text }}</span>
          </template>
        </a-table-column>
        <a-table-column :width="100" key="model" title="品牌型号" data-index="model" ellipsis="true" align="center">
          <template slot-scope="text">
            <span :title="text" @click="handleCopy(text, $event)">{{ text }}</span>
          </template>
        </a-table-column>
        <a-table-column :width="100" key="price" title="单价" data-index="price" ellipsis="true" align="center">
          <template slot-scope="text">
            <span :title="text" @click="handleCopy(text, $event)">{{ text }}</span>
          </template>
        </a-table-column>
        <a-table-column :width="100" key="delivery" title="货期" data-index="delivery" ellipsis="true" align="center">
          <template slot-scope="text">
            <span :title="text" @click="handleCopy(text, $event)">{{ text }}</span>
          </template>
        </a-table-column>
        <a-table-column :width="100" key="purchaseDate" title="采购时间" data-index="purchaseDate" ellipsis="true" align="center"/>
        <a-table-column :width="100" key="purchaseContractNo" title="采购合同" data-index="purchaseContractNo" ellipsis="true" align="center"/>
        <a-table-column :width="100" key="saleContractNo" title="销售合同" data-index="saleContractNo" ellipsis="true" align="center"/>
        <a-table-column :width="180" key="time" title="时间" data-index="time" ellipsis="true" align="center">
          <template slot-scope="text, record">
            {{dateTimeFormat(record.time)}}
          </template>
        </a-table-column>
        <a-table-column :width="100" key="remark" title="备注" data-index="remark" ellipsis="true" align="center"/>
      </a-table>
    </div>
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="visible">
      <el-form ref="form1" :model="form1"  status-icon>
        <el-form-item label="项目名" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.proName"></el-input>
        </el-form-item>
        <el-form-item label="设材代码" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.code"></el-input>
        </el-form-item>
        <el-form-item label="设备名" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.brand"></el-input>
        </el-form-item>
        <el-form-item label="供应商" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.supplier"></el-input>
        </el-form-item>
        <el-form-item label="型号" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.model"></el-input>
        </el-form-item>
        <el-form-item label="技术参数" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.params"></el-input>
        </el-form-item>
        <el-form-item label="供应商报价" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.price"></el-input>
        </el-form-item>
        <el-form-item label="货期" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.delivery"></el-input>
        </el-form-item>
        <el-form-item label="报价" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.quote"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.remark"></el-input>
        </el-form-item>
        <el-form-item label="采购时间" label-width="80px" size="small" prop="remark">
          <el-date-picker v-model="form1.purchaseDate" value-format="timestamp" type="date" placeholder="请选择采购时间" size="small" />
        </el-form-item>
        <el-form-item label="采购合同编号" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.purchaseContractNo"></el-input>
        </el-form-item>
        <el-form-item label="销售合同编号" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.saleContractNo"></el-input>
        </el-form-item>
        <el-form-item label="数量" label-width="80px" size="small" prop="remark">
          <el-input type="text" v-model="form1.number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="submitHandler('form')">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import qs from 'querystring'
  import '@/styles/auto-style.css'
  import { dateTimeFormat,nullFormat } from '@/utils/format'
  import clip from '@/utils/clipboard'

  export default {
    data() {
      return {
        form1: {},
        title: '',
        visible: false,
        hasNextPage: true,
        currentPage: 1,
        tableHeight: document.documentElement.clientHeight-83-150,
        projects: [],
        form: {},
        pools: [],
        loading: true,
        downloadLoading: false,
        pagination: {
          showTotal: total => `共 ${total} 条结果`,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['5', '10', '20', '50'],
          pageNum: 1,
          pageSize: 10,
          total: 0,
          onChange: (pageNum) =>  {
            this.pagination.pageNum = pageNum
            this.toSearch()
          },
          onShowSizeChange: (pageNum, pageSize) => {
            this.pagination.pageSize = pageSize
            this.toSearch()
          } // 改变每页数量时更新显示
        }
      }
    },
    created() {
      this.loadPools()
    },
    // mounted() {
    //   var that = this
    //   let table = document.querySelector('#lazyLoadTable .el-table__body-wrapper');
    //   table.addEventListener("scroll", function() {
    //     const scrollDistance =table.scrollHeight - table.scrollTop - table.clientHeight;
    //     //console.log(table.scrollHeight + '-' +table.scrollTop +'-' +table.clientHeight+'='+scrollDistance)
    //     if(scrollDistance <= 0.5) {//等于0证明已经到底，可以请求接口
    //       if(that.hasNextPage){
    //         const name = that.form.name
    //         const brand = that.form.brand
    //         const proName = that.form.proName
    //         const model = that.form.model
    //         let startTime = ''
    //         let endTime = ''
    //         if (that.form.time != null) {
    //           startTime = that.form.time[0]
    //           endTime = that.form.time[1]
    //         }
    //         //请求接口的代码
    //         request.request({
    //           url: '/pool/findByParams?pageNum='+that.currentPage,
    //           method: 'get',
    //           params: {name: name, brand: brand, proName: proName, model: model, startTime: startTime, endTime: endTime}
    //         }).then( response => {
    //           //将请求回来的数据和当前展示的数据合并在一起
    //           that.pools = that.pools.concat(response.data.records)
    //           that.currentPage = response.data.current + 1
    //           that.hasNextPage = response.data.pages > resp.data.current?true:false
    //           that.loading = false
    //         }).catch(()=>{
    //           that.loading = false
    //         })
    //       }
    //     }
    //   })
    // },
    methods: {
      //跳转
      jumpQuote(proDetailId){
        this.$router.push({ path: '/inquiry/quote/list', query: {proDetailId: proDetailId}})
      },
      handleCopy(text, event) {
        clip(text, event)
      },
      handleDownload() {
        this.downloadLoading = true
        let pools = []
        let startTime = ''
        let endTime = ''
        if (this.form.time != null) {
          startTime = this.form.time[0]
          endTime = this.form.time[1]
        }
        request.request( {
          url: '/pool/findByParamsOutput',
          methods: 'get',
          params: {
            'name': this.form.name,
            'brand': this.form.brand,
            'model': this.form.model,
            'proName': this.form.proName,
            'startTime': startTime,
            'endTime': endTime
          }
        }).then(resp => {
          pools = resp.data
          import('@/vendor/Export2Excel').then(excel => {

            const tHeader = [
              '设备名', '供应商', '品牌', '技术参数', '品牌型号', '单价', '采购时间',
              '采购合同','销售合同','时间','备注'
            ]
            const filterVal = ['name', 'supplier', 'brand', 'params', 'model', 'price', 'purchaseDate',
              'purchaseContractNo', 'saleContractNo', 'time', 'remark']
            let list = []
            pools.map(item=>{
              let pool = {}
              filterVal.map(key => {
                if (key == 'time') {
                  pool[key] = dateTimeFormat(parseInt(item[key]))
                }else {
                  pool[key] = item[key]
                }
              })
              list.push(pool)
            })

            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '产品池'
            })
            this.downloadLoading = false
          })
        }).catch(()=>{
          this.downloadLoading = false
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      submitHandler() {
        request.request({
          url: '/pool/addProductPool',
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: qs.stringify(this.form1)
        }).then(resp => {
          this.visible = false
          this.loadPools()
          this.$message({ message: resp.message, type: 'success' })
        }).catch(()=>{

        })
      },
      add() {
        this.title = '新增'
        this.visible = true
      },
      buttonToSearch(){
        //查询按钮点击初始化分页参数
        this.pagination.pageNum = 1
        this.pagination.pageSize = 15
        this.toSearch()
      },
      toSearch() {
        let startTime = ''
        let endTime = ''
        if (this.form.time != null) {
          startTime = this.form.time[0]
          endTime = this.form.time[1]
        }
        request.request({
          url: '/pool/findByParams',
          method: 'get',
          params: {
            'name': this.form.name,
            'brand': this.form.brand,
            'proName': this.form.proName,
            'model': this.form.model,
            'supplier': this.form.supplier,
            'startTime': startTime,
            'endTime': endTime,
            'pageNum': this.pagination.pageNum,
            'pageSize': this.pagination.pageSize,
          }
        })
          .then(response => {
            this.pools = response.data.records
            this.pagination.pageSize = parseInt(response.data.size)
            this.pagination.total = parseInt(response.data.total)
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      },
      dateTimeFormat,
      loadPools() {
        request.get('/pool/findByParams')
          .then(response => {
            console.log(response.data)
            this.pools = response.data.records
            this.pagination.pageSize = parseInt(response.data.size)
            this.pagination.total = parseInt(response.data.total)
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .pro_pool_list {
    /deep/.el-form-item__content{
      height:auto;
      line-height:32px;
      margin-left:90px!important
    }
  }
</style>
